Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🔧 Как правильно настроить Debounce и Throttle для оптимизации событий

Debounce и Throttle — техники управления частотой срабатывания событий в браузере.

Почему важно:

📍 Уменьшают количество вызовов функции

📍 Повышают производительность страницы

📍 Предотвращают лаги и подвисания интерфейса

Как работают:

➡️ Debounce — функция вызывается только после того, как событие перестало происходить в течение заданного времени. Подходит для поиска при вводе, ресайза окна.

➡️ Throttle — функция вызывается не чаще, чем один раз за фиксированный интервал времени. Подходит для прокрутки, скролла, отслеживания позиции.

Как внедрить:

1. Debounce — пример на JS:

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

window.addEventListener('resize', debounce(() => {
  console.log('Resize обработан');
}, 300));

2. Throttle — пример на JS:

function throttle(fn, limit) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= limit) {
      last = now;
      fn(...args);
    }
  };
}

window.addEventListener('scroll', throttle(() => {
  console.log('Scroll обработан');
}, 200));

3. Используйте готовые библиотеки, например lodash.

4. Тестируйте производительность через DevTools — уменьшение количества вызовов улучшает отзывчивость.

💡 Debounce и Throttle — простой способ повысить плавность работы интерфейса и снизить нагрузку.

🐸 Библиотека фронтендера

#буст

Please open Telegram to view this post

VIEW IN TELEGRAM

www.tg-me.com/in/Библиотека фронтендера | Frontend JS JavaScript React js Angular js Vue js/com.frontendproglib/6206

2.2K viewsJun 3 at 07:02

🔧 Как правильно настроить Debounce и Throttle для оптимизации событий

Debounce и Throttle — техники управления частотой срабатывания событий в браузере.

Почему важно:

📍 Уменьшают количество вызовов функции

📍 Повышают производительность страницы

📍 Предотвращают лаги и подвисания интерфейса

Как работают:

➡️ Debounce — функция вызывается только после того, как событие перестало происходить в течение заданного времени. Подходит для поиска при вводе, ресайза окна.

➡️ Throttle — функция вызывается не чаще, чем один раз за фиксированный интервал времени. Подходит для прокрутки, скролла, отслеживания позиции.

Как внедрить:

1. Debounce — пример на JS:

function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

window.addEventListener('resize', debounce(() => {
  console.log('Resize обработан');
}, 300));

function throttle(fn, limit) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= limit) {
      last = now;
      fn(...args);
    }
  };
}

window.addEventListener('scroll', throttle(() => {
  console.log('Scroll обработан');
}, 200));